<template>
    <div class="userInfo">
        <!-- 顶部 -->
       <div class="j-userInfo">
           <div class="userHeader">
              <router-link tag="i" to="/home" class="icon-back"></router-link>
              <router-link tag="i" to="/home" class="icon-home"></router-link>
           </div>
           <div class="userlogin">
             <div class="user-photo">
                <img src="https://h2.appsimg.com/b.appsimg.com/upload/mst/2022/10/13/86/a2a3be4adb5d7c2f18b9212a46ca6b5a.png" alt="">
             </div>
             <div class="user-grade">
                <img src="https://h2.appsimg.com/a.appsimg.com/upload/uls/0/2018/12/11/150/deae2906957a4f30a33577a686379f4f.png" alt="">
                <span>银牌会员</span>
             </div>
             <div class="user-nick">超优会会员</div>
           </div>
       </div>

       <!-- 订单 -->
       <div class="J-user-order">
            <div class="order-user-content">
                <router-link to="/waitList" tag="div" class="order-item">
                    <span class="order-icon ">
                        <i class="icon-pay"></i>
                    </span>
                    <span class="icon-text">待付款</span>
                </router-link>
                <div class="order-item">
                    <span class="order-icon ">
                        <i class="icon-deliver"></i>
                    </span>
                    <span class="icon-text">待收货</span>
                </div>
                <router-link to="orderList" tag="div" class="order-item">
                    <span class="order-icon ">
                        <i class="icon-orders"></i>
                    </span>
                    <span class="icon-text">全部订单</span>
                </router-link>
            </div>
       </div>


       <!--功能 -->
       <div class="J-user-menus">
        <ul>
            <router-link to="/myCollect" tag="li">
                <span>我的收藏</span>
                <i class="icon-back"></i>
            </router-link>
            <router-link tag="li" to="/myAddress">
                <span>收货地址</span>
                <i class="icon-back"></i>
            </router-link>
            <li>
                <span>购物车历史</span>
                <i class="icon-back"></i>
            </li>
            <li>
                <span>浏览历史</span>
                <i class="icon-back"></i>
            </li>
            <li>
                <span>零钱</span>
                <i class="icon-back"></i>
            </li>
            <li>
                <span>唯品花</span>
                <i class="icon-back"></i>
            </li>
            <li>
                <span>优惠券</span>
                <i class="icon-back"></i>
            </li>
            <li>
                <span>我的唯品币</span>
                <i class="icon-back"></i>
            </li>
            <li>
                <span>申请退换</span>
                <i class="icon-back"></i>
            </li>
            <li>
                <span>修改登录密码</span>
                <i class="icon-back"></i>
            </li>
            <li>
                <span>管理支付密码</span>
                <i class="icon-back"></i>
            </li>
            <li>
                <span>绑定手机</span>
                <i class="icon-back"></i>
            </li>
             <li>
                <span>隐私政策</span>
                <i class="icon-back"></i>
            </li>
        </ul>
       </div>

       <!-- 退出登录 -->
       <div class="J-user-logout" @click="logout">
        退出登录
       </div>

       <div class="whiteBian"></div>
    </div>
</template>

<script>
    export default {
        name:"userInfoView",

        methods:{
            // 退出登录
            logout(){
                localStorage.removeItem("token");
                this.$router.push("/home")
            }
        }
    }
</script>

<style lang="scss" scoped>
.userInfo{
    height: 100%;
    
    .j-userInfo{
        width: 100%;
        height: 205px;
        background:url(https://h2.vipstatic.com/ms2-m.vipstatic.com/static/base/img/07e0a3f4.user-login-bg.png)no-repeat center center/cover ;
        display: flex;
        flex-direction: column;

        .userHeader{
            display: flex;
            justify-content: space-between;
            i{
                font-size: 22px;
                color: #492323;
                margin:0  15px;
                line-height: 44px;
            }
        }

        .userlogin{
            display: flex;
            flex-direction:column ;
            align-items: center;
            justify-content: center;
            .user-photo{
                width: 80px;
                height: 80px;
                background: url("../assets/image/bg.png")no-repeat center center/cover;
                border-radius: 50%;
                overflow: hidden;
                position: relative;
                img{
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translateX(-50%)translateY(-50%);
                   width: 71px;
                }
            }
            .user-grade{
                display: flex;
                align-items: center;

                img{
                    width: 24px;

                }
                span{
                    color: #98989f;
                    line-height: 24px;
                }
            }
            .user-nick{
                margin-top: 15px;
                color: #222;
                font-size: 14px;
                line-height: 14px;
            }
        }
    }
    .J-user-order{
        .order-user-content{
            display: flex;
            justify-content: space-evenly;
            border-bottom: 1px solid #cccccc;
            padding-bottom: 5px;
        }
        .order-item{
            width: 33.33%;
            height: 83px;
            display: flex;
            flex-direction: column;
            // justify-content: center;
            align-items: center;
            
            .order-icon{
                font-size: 16px;
                margin-bottom: 7px;
                margin-top:12px ;
                width: 41px;
                height: 41px;
                text-align: center;
                border-radius: 50%;
                background-color: #fcf9f1;
                line-height: 41px;
            }

            .icon-text{
                font-size: 12px;
                line-height: 24px;
                height: 24px;

            }
        }
    }

    .J-user-menus{
        margin-top: 20px;
        border-bottom: 1px solid #cccccc;
        border-top:1px solid #cccccc;

        ul{
            display: flex;
            padding-left:15px ;
            flex-direction: column;
            li{
                display: flex;
                justify-content: space-between;
                padding: 12px 0;
                width: 100%;
                border-bottom: 1px solid #cccccc;
                span{
                    font-size:18px ;
                    line-height: 25px;
                    color: #565656;
                }
                i{
                    transform:rotate(180deg);
                    font-size:20px;
                    color: #7f7f7f;
                    line-height: 25px;
                    margin-right: 15px;
                }

                &:last-child{
                    border-bottom: none;
                }
            }
        }
    }

    .J-user-logout{
        text-align: center;
        line-height: 50px;
        font-size: 18px;
        height: 50px;
        margin: 20px 0;
        color: #555;
        border-bottom: 1px solid #cccccc;
        border-top: 1px solid #cccccc;
    }
    .whiteBian{
        height: 20px;
        width: 100%;
    }
}

</style>